<template>
  <editor-layout class="edit" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <el-form size="small" :model="model" :rules="rule" ref="form" @keyup.enter.native="handleOk()" label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="分组" prop="groupId">
            <el-select v-model="model.groupId">
              <el-option v-for="item in groupList" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="model.name" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="图片" prop="fileName">
            <file-upload ref="up1" :params="{xtlx: 'report-image'}" :limit="1" accept="image/*" listType="picture"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </editor-layout>
</template>


<script>
import fileUpload from '@/components/common/file/file-upload'
import {getImageInfoId, postImageSave} from '@/api/image'
import {postImagegroupListAll} from '@/api/image-group'
export default {
  name: 'edit',
  components: {
    fileUpload
  },
  props: {
    id: [String, Number]
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        groupId: '',
        name: '',
        fileName: '',
        url: ''
      },
      rule: {
        groupId: [{required: true, message: '必填项'}],
        name: [{required: true, message: '必填项'}],
        fileName: [{required: true, message: '必填项'}]
      },
      groupList: []
    }
  },
  methods: {
    async init() {
      await this.getGroupList()
      if (this.id) {
        this.loadForm()
      }
    },
    async loadForm() {
      this.loading = true
      const data = await getImageInfoId(this.id).catch(e => {
        this.loading = false
        throw new Error(e)
      })
      this.model = data
      const file = {
        url: data.url,
        fileName: data.fileName
      }
      this.$refs.up1.fileList = [file]
      this.loading = false
    },
    async getGroupList() {
      // 数据源类型
      const res = await postImagegroupListAll({type: 'image'})
      const list = res || []
      this.groupList = list.map(o => {
        return {label: o.name, value: o.id}
      })
    },
    handleOk() {
      const images = this.$refs.up1.getData()
      if(images.length > 0) {
        const {fileName, url} = images[0]

        this.model.fileName = fileName
        this.model.url = url
      }

      this.$refs.form.validate(ok => {
        if (!ok) return
        this.saveLoading = true
        postImageSave(this.model).then(_ => {
          this.saveLoading = false
          this.$notify.success('保存成功！')
          this.$emit('on-ok')
        })
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>


